<template>
  <div class="header">
    <router-link
      to="/"
      class="logo"
    ></router-link>
    <div class="nav">
      <div class="nav-item left active">首页</div>
      <div class="nav-item left">下载App</div>

      <div class="search">
        <input
          type="text"
          placeholder="搜索"
        >
        <span class="iconfont zoom">&#xe60c;</span>
      </div>

      <div class="nav-item right">
        <span class="iconfont">&#xe636;</span>
      </div>
      <div class="nav-item right">登录</div>

    </div>
    <div class="addition">
      <button class="writing">
        <span class="iconfont">&#xe61b;</span>
        写文章
      </button>
      <button class="reg">注册</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {}
};
</script>

<style scoped>

  @import "../../static/iconfont/iconfont.css";

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
.header {
  position: relative;
  height: 56px;
  border: 1px solid #efefef;
}
.logo {
  position: absolute;
  top: 0;
  left: 30px;
  width: 100px;
  height: 56px;
  background: url("../../static/images/logo.png");
  background-size: contain;
}
.nav {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-right: 9%;
}
.nav-item {
  line-height: 56px;
  padding: 0 15px;
  font-size: 17px;
}
.left {
  float: left;
}
.right {
  float: right;
  color: #969696;
}
.active {
  color: #ea6f5a;
}
.search {
  position: relative;
  float: left;
}
.search input {
  width: 200px;
  height: 38px;
  margin-top: 9px;
  outline: 0;
  border: 0;
  border-radius: 19px;
  padding: 0 30px 0 20px;
  font-size: 14px;
  background: #eee;
  box-sizing: border-box;
  color: #666;
}
.zoom {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 30px;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
}

.addition {
  position: absolute;
  top: 0;
  right: 30px;
  height: 56px;
}

.addition button {
  float: right;
  margin-top: 9px;
  line-height: 38px;
  border-radius: 19px;
  margin-right: 20px;
  border: 1px solid #ec6149;
  padding: 0 20px;
  background-color: #fff;
}
.addition .reg {
  color: #ec6149;
}
.addition .writing {
  background: #ec6149;
  color: #fff;
}

</style>
